<template>
  <div class="home">
    <el-container>
      <HomeAside
        :menus="menus"
        :isCollapse="isCollapse"
        :defaultActive="defaultActive"
        @handleRoute="handleRoute"
      ></HomeAside>
      <el-container>
        <!-- //首页头部 -->
        <el-header class="header">
          <i
            class="el-icon-s-fold"
            v-show="!isCollapse"
            @click="isCollapse = !isCollapse"
          ></i>
          <i
            class="el-icon-s-unfold"
            v-show="isCollapse"
            @click="isCollapse = !isCollapse"
          ></i>
          <h2>电商后台管理</h2>
          <div>
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="signOut"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <span>{{ username }}</span>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { SET_TOKEN, SET_USERNAME } from "@/store/mutation-type";
import { getMenus } from "@/http/apis";
import HomeAside from "../components/HomeAside";
export default {
  data() {
    return {
      menus: [],
      defaultActive: "",
      isCollapse: true,
    };
  },
  components: { HomeAside },
  computed: {
    ...mapState(["token", "username"]),
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        this.defaultActive = val.path;
      },
    },
  },
  methods: {
    ...mapMutations([SET_TOKEN, SET_USERNAME]),
    //获取菜单
    async getMenus() {
      const { data } = await this.$axios("menus");
      this.menus = data;
    },
    //退出
    signOut() {
      this[SET_TOKEN]();
      this[SET_USERNAME]();
      this.$router.replace({
        name: "Login",
      });
    },
    //菜单跳转
    handleRoute(str) {
      this.$router.push({
        name: str.slice(0, 1).toUpperCase() + str.slice(1).toLowerCase(),
      });
    },
  },
  async mounted() {
    // this.getMenus();
    // this.axios.get("menus").then((res) => {
    //   this.menus = res.data.data;
    // });
    this.menus = (await getMenus()).data;
  },
};
</script>
<style scoped lang="stylus">
.home
  .header
    background-color #fff
    display flex
    align-items center
    justify-content space-between
    box-shadow 0 1px 4px rgb(0 21 41 / 8%)
</style>
